通俗易懂理解ES6 - 变量声明命令及其块级作用域

引言

万丈高楼平地起，欲练此功，必先打好基本功: )。

ES6已经融入到了我们的日常开发当中，甚至一些ES7的特性也已经在普遍使用，但由于浏览器的支持问题，ES6的代码在大多数情况下，还是需要编译成ES5才能正常地在各浏览器上正常运行。
ES6支持6中形式的变量命名方式：var、let、const、function、class、function，本文主要讨论的是var、let、const。class和function会在之后专门讨论。

变量声明

在ES5里面，我们要声明一个变量，会通过三种命令方式来实现，var、隐式声明、function；

var a = 'test';     //var定义一个变量a，并赋值字符串'test';
b = 'test2';        //隐式声明，在堆变量b赋值字符串'test2'前，未以任何方式声明变量b，此时b为全局变量
function f() {
    cosole.log('haha');
}

隐式声明声明变量是一个很不好的行为，隐式声明的变量类似于通过var定义一个变量，且变量的作用域直接指向window对象，这会导致变量容易被错误引用或修改

function f() {
    var fn = function() {
        (function() {
            b = '隐式声明的变量b';
        })();
    }
    fn();
}
f();
b;          //'隐式声明的变量b'
window.b;   //'隐式声明的变量b'

ES6-变量声明的let和const

而在ES6中，变量声明增加了let和const两种形式，先看以下例子：

console.log(a);     //无报错，输出undefined
var a = 'test';
var a = 'var again';

通过var声明的变量存在变量提升一说，同一变量名在相同作用域下能重复定义，上述代码执行时会以以下情形执行：先定义一个变量var a,console.log(a),a = 'test'；

console.log(son);     //报错 Uncaught ReferenceError: son is not defined
let son = 'James Bond';

let声明变量不存在变量提升，因此在son被定义前使用son的话，会报错

const name;            //报错 Uncaught SyntaxError: Missing initializer in const declaration
let education;              //正常执行
console.log(education);     //undefined

const name1 = 'human';
name1 = 'cat';         //报错 Uncaught TypeError: Assignment to constant variable.

通过const定义的name、obj是一个常量，在声明时必须对其进行赋值，且赋值后不能进行二次赋值，而let声明的变量在声明时可不赋值，后面再赋值，此时默认值为undefined。

const obj = {};
obj;                //{}
obj.a = '1';
obj;                //{a:1}

const 定义的obj在常量中存储的是obj对象在栈里指向堆的地址，该指向地址不可改变，而在堆地址里面存放的数据不被约束，是可变的。若希望禁止变更obj及其内部属性，Object提供了freeze方法，如下函数能更好的递归冻结Object对象

const freezeObj = (obj) => {
    Object.freeze(obj);
    Object.keys(obj).forEach((item) => {
        if(type of(item) === 'object') freezeObj(item);
    });
}

let fruit = 'orange';
var fruit = 'apple';    //报错 Uncaught SyntaxError: Identifier 'fruit' has already been declared

通过let定义的变量在同一作用域下不允许被重复定义，否则会报错，const也是如此

var test = 'test',
    test1 = 'test1';
{
    test = 'new test';      //Uncaught ReferenceError: test is not defined
    test1 = 'new test1';    //Uncaught ReferenceError: test1 is not defined
    let test;
    const test1 = 'new test1';
}

通过let、const声明的变量会存在 __暂时性死区__，即：在声明该变量的作用域内，变量已经被绑定在该作用域之中，忽略外界存在的同名变量，在该作用域下，该变量在变量声明之前都不能被使用。

变量声明结论

var：

1. 存在变量提升，可重复多次声明同名变量。

let：

1. 不存在变量提升，必须先定义再使用，否则报错;
2. 同一作用域下不可重复定义同名变量，否则报错;
3. 在代码块内，通过let声明的变量，尽管代码块外层有同名变量，代码块内部在该变量声明前都不能使用该变量，否则报错。

const：

1. 不存在变量提升,必须先定义再使用，否则报错；
2. 同一作用域下不可重复定义同名变量，否则报错；
3. 创建变量的同时必须对其赋值，且赋值后不能直接通过=直接替换整个值否则报错；
4. 在代码块内，通过const声明的变量，尽管代码块外层有同名变量，代码块内部在该变量声明前都不能使用该变量，否则报错。

let 和 const的出现，很好地把ES5中var定义变量的Bug给埋了，解决了定义同名变量导致变量间相互污染的问题，保证了同一块级作用域下，变量名的唯一性。同时const定义常量能更直观地明白常量的意义及其不可修改性。

块级作用域

ES6新增的变量声明命令存在块级作用域

什么是块级作用域？

{
    var a = 'test';
    let b = 'test1';
}
console.log(a);     //test
console.log(b);     //Uncaught ReferenceError: b is not defined

这便是块级作用域最基本的示例，通过let、const声明的变量仅能在其代码块内被使用，该代码块内部即是一个块级作用域

块级作用域有什么用？

var a = 'test';
function f(){
    console.log(a);
    if(true) {
        var a = 'test1';
    }
    console.log(a);
}
f();        //undefinded   test1

这个例子输出的结果是undefined，原因在于，在f()中，不论if语句判断是否通过，if内部的var a都被变量提升，且变量a均通过var命令声明，内部变量a覆盖了外部变量a；

换个写法再来一遍

let a = 'test';
function f(){
    console.log(a);
    if(true) {
        let a = 'test1';
    }
    console.log(a);
}
f();        //test   test

比对一下两段代码的执行情况：
看看该代码的实际执行情况：

var a                               let a
a = 'test'                          a = 'test'
function f                          function f
f() = {}                            f() = {}
f()                                 f()
var a                               console.log(a);
console.log(a)                      if(true)
if(true)                            let a        //此处的a是另一个a，可以理解为_a,且_a的作用范围仅在if语句内
a = 'test1'                         a = 'test1';    //类似于_a = 'test1'
console.log(a)                      console.log(a)  //类似于console.log(_a)

从上面的比对可以看出，通过let声明的变量a，不会被变量提升，且具有块级作用域，不会影响到上层作用域的a变量

再来一个示例：

for(var i=0;i<10;i++){
    console.log('for里面的i：'+i);          // 1、2、3......10
}
console.log(i)；            //10

这里定义的循环计数变量i，原本只是想在循环内使用，但由于使用了var声明，因此不存在块级作用域，导致for循环外也能获取到了i的值。

ES6中规定，函数本身的作用域在其所在的块级作用域当中。

function fn() {
    console.log('outside console');
}
(function() {
    if(false) {
        function fn() {
            console.log('inside console');
        }
    }
    fn();
}());

上述代码中，fn()执行结果会报错fn is not a function，因为在fn执行的环境中存在function fn的声明，声明被提前，导致fn被提前定义，但没有被赋值为function。

ES6的函数自执行代码变得精简。

//从
(function() {
    console.log('test');
})();

//变为

{
    console.log('test');
}

块级作用域结论

通过使用let const，让变量存在了块级作用域，很好地划分变量间的作用范围，避免了以往同名变量相互污染问题；外层变量无法直接读取内层变量，对内层变量具有更好的保密性，内外层代码独立执行，相互间不影响；精简了函数自执行代码

以上。

文章观点内容如有错误欢迎指出交流，相互进步